<template>
	<view>
		<u-sticky>
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="sectionChange"></u-tabs>
			<view class=" u-p-r-30 u-p-l-30 margin-zdy">
				<u-input v-model="operateName" placeholder="选择项目" type="select" @click="getO()" v-if="current == 1"/>
				<u-input v-model="privatecarFleetName" placeholder="选择承运商" type="select" @click="getC()" v-if="current == 1"/>
				<u-search placeholder="请输入关键词搜索" :clearabled="true" v-model="keyword" border-color="#606266" @custom="search" @search="search"></u-search>
			</view>
		</u-sticky>
		<map id="map" 
		style="width: 100%; height: 250px;position: fixed;z-index: 999;" 
		scale="10"
		:markers="markers"
		:longitude="longitude"
		:latitude="latitude"
		v-if="current == 0">
		</map>
		<view style="height: 250px;" v-if="current == 0">
		</view>
		<u-card padding="16" v-for="(item,index) in yifayun" :key="index" v-if="current == 0">
			<view class="" slot="head">
				<view class="wrap">
					<u-row>
						<u-col span="9" text-align="left">
							<view class="u-line-1 weikaishi2">
								<span>车次：{{item.trainNumber}}</span>
							</view>
						</u-col>
						<u-col span="3" text-align="right" v-if="item.tstate == '已定价'">
							<view class=" weikaishi3">
								<span>待装车</span>
							</view>
						</u-col>
						<u-col span="3" text-align="right" v-if="item.tstate == '待发运'">
							<view class=" weikaishi3">
								<span>待发运</span>
							</view>
						</u-col>
						<u-col span="3" text-align="right" v-if="item.tstate == '运输中'">
							<view class=" weikaishi3 jinxingzhong">
								<span>运输中</span>
							</view>
						</u-col>
						<u-col span="3" text-align="right" v-if="item.tstate == '已完成'">
							<view class=" weikaishi3 yiwancheng">
								<span>已完成</span>
							</view>
						</u-col>
						<u-col span="12" text-align="left">
							<view class=" weikaishi3 lanse">
								<span>运单号：{{item.dispatchNumber}}</span>
							</view>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="5" text-align="center">
							<view class="u-line-1">
								<u-icon name="car-fill" :label="item.carnumbger" label-size="33" label-color="#19be6b" color="#19be6b" size="45"></u-icon>
							</view>
						</u-col>
						<u-col span="4" text-align="center">
							<view class="u-line-1 u-m-t-5">
								<span>{{item.privatecarType}}</span>
							</view>
						</u-col>
						<u-col span="3" text-align="center">
							<view class="u-line-1 u-m-t-5" @click="badaphone(item.cartel)">
								<u-icon name="phone" :label="item.driver1" label-color="#2b85e4" color="#2b85e4" size="30"></u-icon>
							</view>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="7" text-align="left">
							<view class="u-line-1 weikaishi4">
								<span>发车日期：{{item.startDate}}</span>
							</view>
						</u-col>
						<u-col span="5" text-align="left">
							<view class=" u-m-t-2 weikaishi4">
								<span>总体积：{{item.tooDeployVolume}}m³</span>
							</view>
						</u-col>
						<u-col span="7" text-align="left">
							<view class=" u-m-t-2 weikaishi4">
								<span>总件数：{{item.tooDeployNum}}</span>
							</view>
						</u-col>
						<u-col span="5" text-align="left">
							<view class=" u-m-t-2 weikaishi4">
								<span>里程：{{item.mileageTraveled}}</span>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="" slot="body">
				<view class="wrap">
					<u-row>
						<u-col span="12" text-align="center">
							<view class="u-line-1 u-m-t-2">
								<u-line-progress active-color="#19be6b" :striped="true" :percent="(item.tooDeployVolume/item.privatecarSurevolume*100).toFixed(1)" :striped-active="true"></u-line-progress>
							</view>
						</u-col>
					</u-row>
					<u-collapse>
						<u-collapse-item title="详情">
							<view v-for="(item1,index1) in item.list" :key="index1">
								<u-row>
									<u-col span="9" text-align="left">
										<view class=" u-m-t-2 weikaishi4">
											<span>{{item1.getUnit}}</span>
										</view>
									</u-col>
									<u-col span="3" text-align="center">
										<view class="u-line-1 u-m-t-5" @click="badaphone(item1.getTel)">
											<u-icon name="phone" :label="item1.getPeople" label-color="#2b85e4" color="#2b85e4" size="30"></u-icon>
										</view>
									</u-col>
									<u-col span="12" text-align="left">
										<view class=" u-m-t-2 weikaishi5">
											<span><u-icon name="map" size="29" labelSize="14px" labelColor="#00c300" label="地址"></u-icon>：{{item1.getLocation}}</span>
										</view>
									</u-col>
									<u-col span="4" text-align="left">
										<view class="weikaishi4">
											<span>线路：{{item1.lineName}}</span>
										</view>
									</u-col>
									<u-col span="4" text-align="left">
										<view class="weikaishi4">
											<span>公里数：{{item1.kilometer}}</span>
										</view>
									</u-col>
									<u-col span="4" text-align="left">
										<view class="weikaishi4">
											<span>备货口：{{item1.stockPort}}</span>
										</view>
									</u-col>
									<u-col span="6" text-align="left">
										<view class="u-line-1 u-m-t-2">
											<span>体积{{item1.tooVolume}}m³</span>
										</view>
									</u-col>
									<u-col span="6" text-align="left">
										<view class="u-line-1 u-m-t-2">
											<span>数量{{item1.totalNum}}</span>
										</view>
									</u-col>
									<u-col span="12" text-align="right" >
										<view class="u-m-t-25 u-line-1">
										</view>
									</u-col>
								</u-row>
							</view>
						</u-collapse-item>
					</u-collapse>
				</view>
			</view>
			<view class="foot-butten" slot="foot">
				<view :class="flex">
					<u-col span="6" text-align="center" @click="tooCarsy(item.dispatchNumber)">
						<view  class="u-m-10 u-border-right">
							配置详情
						</view>
					</u-col>
					<!-- <u-col span="4" text-align="center" @click="tofeiyong(item.dispatchNumber)">
						<view  class="u-m-10 u-border-right">
							费用信息
						</view>
					</u-col> -->
					<u-col span="6" text-align="center" @click="toyunshu(item.dispatchNumber)">
						<view  class="u-m-10 ">
							运输信息
						</view>
					</u-col>
				</view>
			</view>
		</u-card>
		<u-card padding="16" v-for="(item,index) in kongxian" :key="index" v-if="current == 1">
			<view class="" slot="head">
				<view class="wrap">
					<u-row>
						<u-col span="5" text-align="center">
							<view class="u-line-1">
								<u-icon name="car" :label="item.privatecarCarnumber" label-size="33" size="45"></u-icon>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="" slot="body">
				<view class="wrap">
					<view>
						<u-row>
							<u-col span="6" text-align="center">
								<view class="u-line-1 u-m-t-5">
									<span>{{item.privatecarType}}</span>
								</view>
							</u-col>
							<u-col span="6" text-align="center">
								<view class="u-line-1 u-m-t-5" @click="badaphone(item.tel1)">
									<u-icon name="phone" :label="item.driver1" label-color="#2b85e4" color="#2b85e4" size="30"></u-icon>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
		</u-card>
		<u-popup v-model="show" mode="center" closeable width="650rpx" height="850rpx" border-radius="10">
			<view class="u-text-left u-m-t-20 weikaishi2 lanse" style="margin-left: 20rpx;">线路费用报价</view>
			<view class="wrap">
				<view style="background-color: #eaeaea;" v-for="item in feiyonglist" :key="item.id">
					<u-row>
						<u-col span="6" text-align="left">
							<view class="u-line-1 u-m-t-10 weikaishi3">
								<span>{{item.priceName}}</span>
							</view>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="6" text-align="center">
							<view class="u-line-1 u-m-t-10">
								<span>计价方式:{{item.priceMode}}</span>
							</view>
						</u-col>
						<u-col span="6" text-align="center">
							<view class="u-line-1 u-m-t-10">
								<span>线路:{{item.lineName}}</span>
							</view>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="4" text-align="center">
							<view class="u-line-1 u-m-t-10">
								<span>单价:{{item.price}}</span>
							</view>
						</u-col>
						<u-col span="4" text-align="center">
							<view class="u-line-1 u-m-t-10">
								<span>总量:{{item.nums}}</span>
							</view>
						</u-col>
						<u-col span="4" text-align="center">
							<view class="u-line-1 u-m-t-10 lanse">
								<span>金额:{{item.money}}</span>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</u-popup>
		<view>
			<u-select v-model="show2" :list="clist" @confirm="confirm"></u-select>
		</view>
		<view>
			<u-select v-model="show3" :list="olist" @confirm="confirm3"></u-select>
		</view>
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flex:'',
				list: [
					{
						name: '配送中'
					}, 
					{
						name: '空闲车'
					},
				],
				keyword:"",
				privatecarFleetId:'',
				privatecarFleetName:'',
				operateId:'',
				operateName:'',
				current: 0,
				
			    pageNo2: 1,
			    hasMore2: true,
			    orderCount2: 0,
				kongxian:[],
				
				yifayun:[],
				
				show:false,
				show2:false,
				show3:false,
				clist:[],
				olist:[],
				
				markers:[],
				longitude:117.22253336175537,
				latitude:36.66986870125789,
			}
		},
		onLoad() {
			//#ifdef H5 || APP-PLUS
			this.flex = 'u-flex'
			//#endif
			
			this.refresh()
			
			//#ifdef MP-WEIXIN
			let that = this
			uni.getLocation({
				type:'gcj02',
				altitude:false,
				success: function (res) {
					that.longitude = res.longitude
					that.latitude = res.latitude
				},
				fail:function(res){
					//获取当前位置失败
				},
			})
			//#endif
			
			this.$http.post('/rest/operate/list3',{
			},{
				params: {},
				header: {
					'Authorization' :uni.getStorageSync('token'),
				}
			}).then(res => {
				for(let item1 of res.data.data) {
					let obj = {}
					obj.value = item1.id
					obj.label = item1.operateName
					this.olist.push(obj)
				}
			})
			
			this.$http.post('/rest/operate/findme',{
			},{
				params: {
				},
				header: {
					'Authorization' :uni.getStorageSync('token'),
				}
			}).then(res => {
				if(res.data.data != '' && res.data.data != null){
					this.operateId = res.data.data.id
					this.operateName = res.data.data.operateName
					this.$http.post('/rest/driverAndCar/findCarrierList',{
					},{
						params: {
							operateId:res.data.data.id
						},
						header: {
							'Authorization' :uni.getStorageSync('token'),
						}
					}).then(res => {
						for(let item1 of res.data.data) {
							let obj = {}
							obj.value = item1.id
							obj.label = item1.carrierName
							this.clist.push(obj)
						}
					})
				}
			})
		},
		onPullDownRefresh() {
			this.refresh()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		onReachBottom() {
			if(this.current == 1){
				if (this.hasMore2) {
					uni.showLoading({
						title: '加载中'
					})
					this.pageNo2++ 
					setTimeout(() => {
						this.loadOrder2({
							keyword:this.keyword,
							privatecarFleetId:this.privatecarFleetId,
							privatecarState:'Idle'
						}).then(res => {})
					}, 500)
				} else {
					setTimeout(() => {
						uni.showToast({
							icon: 'none',
							title: '已经到低了哦',
							duration: 2000
						});
					}, 500)
				}
			}
		},
		methods: {
			carrier(operateId){
				this.$http.post('/rest/driverAndCar/findCarrierList',{
				},{
					params: {operateId:operateId},
					header: {
						'Authorization' :uni.getStorageSync('token'),
					}
				}).then(res => {
					let newarr = []
					for(let item1 of res.data.data) {
						let obj = {}
						obj.value = item1.id
						obj.label = item1.carrierName
						newarr.push(obj)
					}
					this.clist = newarr
				})
			},
			confirm3(e) {
				this.operateId = e[0].value
				this.operateName = e[0].label
				this.carrier(e[0].value)
			},
			getO(){
				this.show3 = true
			},
			confirm(e) {
				this.privatecarFleetId = e[0].value
				this.privatecarFleetName = e[0].label
				this.refresh()
			},
			getC(){
				this.show2 = true
			},
			toyunshu(dispatchNumber){
				this.$Router.push({
					name: 'transport_msg',
					params: { dispatchNumber:dispatchNumber}
				})
			},
			tofeiyong(dispatchNumber){
				this.$http.post('/rest/transportCar/cost',{
				},{
					params: {
						dispatchNumber:dispatchNumber
					},
					header: {
						'Authorization' :uni.getStorageSync('token'),
					}
				}).then(res => {
					this.feiyonglist = res.data.data
					this.show = true
				})
			},
			sectionChange(e){
				this.current = e
				this.refresh()
			},
			tooCars(carnumbger){
				uni.setStorageSync('check_carnumbger', carnumbger);
				this.$Router.push({
					name: 'checktoo'
				})
			},
			tooCarsy(dispatchNumber){
				this.$Router.push({
					name: 'checktooy',
					params: { dispatchNumber:dispatchNumber}
				})
			},
			badaphone(tel){
				uni.makePhoneCall({
				    phoneNumber: tel
				});
			},
			refresh(){
				if(this.current == 0){
					uni.showLoading({
						title: '默认加载5条...'
					})
					this.$http.post('/rest/transportCar/findCarListBySpecYunShuZhongToo',{
					},{
						params: {
							keyword:this.keyword,
							tstate:'too'
						},
						header: {
							'Authorization' :uni.getStorageSync('token'),
						}
					}).then(res => {
						uni.hideLoading()
						this.yifayun = res.data.data
						let entity_names = ''
						for(let item1 of res.data.data){
							if(entity_names != ''){
								entity_names += ','
							}
							entity_names += item1.carnumbger+'-'+item1.dispatchNumber
						}
						if(entity_names != ''){
							uni.request({
								method:"GET",
								url: 'https://yingyan.baidu.com/api/v3/entity/list',
								data:{
									ak: 'wYkHbMlxX7unRpCiRO3LzAr6DSVrdcGK',
									service_id: 229331,
									filter:'entity_names:'+entity_names,
									coord_type_output: 'gcj02',
								},
								header:{
									'Content-Type':'application/x-www-form-urlencoded'
								},
								success: (res) => {
									if(res.data.status == 0){
										let that = this
										let markersId = 1
										for(let item2 of res.data.entities){
											if(item2.latest_location.latitude != 0){
												let obj = {}
												obj.id = markersId
												obj.latitude = item2.latest_location.latitude
												obj.longitude = item2.latest_location.longitude
												obj.iconPath = 'https://z3.ax1x.com/2021/09/18/4lCeHA.png'
												obj.width = 20
												obj.height = 20
												let objq = {}
												objq.content = item2.entity_name.slice(0,7)+'，最新时间:'+that.timestampToTime(item2.latest_location.loc_time)
												objq.fontSize = 12
												objq.borderRadius = 5
												objq.padding = 4
												objq.display = 'ALWAYS'
												obj.callout = objq
												that.markers.push(obj)
												markersId++
											}
										}
									} 
								}
							})
						}
					})
				} 
				if(this.current == 1){
					uni.showLoading({
						title: '加载中'
					})
					this.pageNo2 = 1
					this.hasMore2 = true
					this.loadOrder2({
						keyword:this.keyword,
						privatecarFleetId:this.privatecarFleetId,
						privatecarState:'Idle'
					}).then(res => {
					})
				} 
			},
			loadOrder2(param = {}) {
				return new Promise((resolve, reject) => {
					param = Object.assign(param, {
						page: this.pageNo2,
						limit: 10
					})
					this.$http.post('/rest/transport/privatecarPagelist',{
					},{
						params: param,
						header: {
							'Authorization' :uni.getStorageSync('token'),
						}
					}).then(res => {
						uni.hideLoading()
						if (this.pageNo2 == 1) {
							this.kongxian = res.data.data
						} else {
							this.kongxian = this.kongxian.concat(res.data.data)
						}
						this.orderCount2 = res.data.count
						this.hasMore2 = this.pageNo2 * 10 < res.data.count
						resolve(res)
					})
				})
			},
			search(e){
				this.refresh()
			},
			timestampToTime(timestamp) {
				var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
				var D = date.getDate() + ' ';
				var h = date.getHours() + ':';
				var m = date.getMinutes() + ':';
				var s = date.getSeconds();
				return Y+M+D+h+m+s;
			}
		}
	}
</script>
<style lang="scss">
	.u-body-item {
		padding: 20rpx 15rpx;
	}
	.wrap {
		padding: 0rpx 12rpx;
	}

	.u-row {
		margin: 10rpx 2rpx;
	}
	.weikaishi2{
		font-size: 34rpx;
	}
	.baise{
		color: #ffffff;
		font-size: 34rpx;
	}
	.weikaishi3{
		font-size: 30rpx;
	}
	.margin-zdy{
		padding: 5rpx 20rpx 5rpx 30rpx;
		background-color: #FFFFFF;
	}
</style>
